<template>
    <div class="OpenVip">
        <div v-for="(item, index) in vips" :key="index" class="vip active-white" @click="vipClick(index)">
            <img src="../../assets/logo.png" alt="">
            <div style="flex: 1;">
                <p><span class="name">{{item.title}}</span></p>
                <p><span class="price DIN-Medium">{{item.price}}</span></p>
            </div>
            <gy-icon v-if="item.active" style="color: #3B83FF;" font-name="icon-xianshi_xuanzetianchong"/>
            <gy-icon v-else font-name="icon-choose"/>
        </div>
        <div class="bottom f-row f-j-center f-a-start">
            <div class="submitButton" @click="toOpen" style="margin-top: 0.2rem;">立即开通</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO, SHOW_PAY_PASSWORD_DIALOG} from "@/store/MutationTypes";
import GyIcon from "@/components/GyIcon.vue";

@Component({
    name: 'OpenVip',
    components: {GyIcon}
})
export default class extends Vue {
    private vips: any[] = [
        { title: '体验会员', price: '30ADS', active: true },
        { title: '黄金会员', price: '90ADS', active: false },
        { title: '铂金会员', price: '120ADS', active: false },
    ];
    private mounted(): void {
        let __this = this;
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {
                name: '首页',
                click: () => {
                    __this.$router.push('/home');
                }
            }
        })
    }
    private vipClick(index: number):void {
        for (let i = 0; i < this.vips.length; i++) {
            if (this.vips[i].active) {
                this.vips[i].active = false;
            }
            if (index === i) {
                this.vips[i].active = true;
            }
        }
    }
    private toOpen(): void {
        let __this = this;
        this.$store.dispatch(SHOW_PAY_PASSWORD_DIALOG, (r: any) => {
            __this.$common.toast({
                mes: r
            });
            console.log(r);
            __this.$store.dispatch(SHOW_PAY_PASSWORD_DIALOG, undefined);
        })
    }
}
</script>

<style scoped lang="less">
.OpenVip {
    padding: 0.2rem 0.3rem 0 0.3rem;
    & .vip {
        width: 6.9rem;
        height: 1.98rem;
        background-color: white;
        border-radius: 0.1rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0.3rem 0.6rem;
        margin-bottom: 0.2rem;
        position: relative;
        & p {
            text-align: left;
            line-height: 0.6rem;
            & .name {
                color: #666666;
                font-size: 0.36rem;
                font-weight: 600;
            }
            & .price {
                color: #6C6C6C;
                font-size: 0.3rem;
            }
        }
        & img {
            width: 1.0rem;
            height: 1.0rem;
            border-radius: 1.0rem;
            margin-right: 0.2rem;
        }
    }
    & .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.74rem;
        background-color: white;
        z-index: 2;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            background-image: linear-gradient(
                    0deg,
                    transparent 61%,
                    rgba(0, 0, 0, 0.3) 100%
            );
        }
    }
}
</style>
